<template>
	<view style="background-color: rgb(245, 245, 245);height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
				<navigator open-type="navigateBack" style="padding:10rpx">
					<image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
				</navigator>
				<text>开门记录</text>
				<!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			</view>
		</view>


		<view class="" style="width: 100vw;height: 200rpx;"></view>
		<view class="box">
			<view class="box1">
				<view class="box1-1">
					填写车牌号
				</view>
				<view class="box1-2">
					<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true"
						@blur="codeNumBlurFun" @input="codeNumInputFun" v-model="code" type="number" maxlength="7" />
					<!-- <view class="phone_code_single_codeinput">
						<view v-for="(item,index) in 6" :key="index" @click="codefocusFun(index)"
							:style="(index == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
							{{code[index]?code[index]:''}}
						</view>
					</view> -->
					<view class="box1-2-1" @click="codefocusFun(0)"
						:style="(0 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[0]?code[0]:''}}
					</view>
					<view class="box1-2-1" @click="codefocusFun(1)"
						:style="(1 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[1]?code[1]:''}}
					</view>
					<view class="box1-2-2"></view>
					<view class="box1-2-1" @click="codefocusFun(2)"
						:style="(2 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[2]?code[2]:''}}
					</view>
					<view class="box1-2-1" @click="codefocusFun(3)"
						:style="(3 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[3]?code[3]:''}}
					</view>
					<view class="box1-2-1" @click="codefocusFun(4)"
						:style="(4 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[4]?code[4]:''}}
					</view>
					<view class="box1-2-1" @click="codefocusFun(5)"
						:style="(5 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[5]?code[5]:''}}
					</view>
					<view class="box1-2-1" @click="codefocusFun(6)"
						:style="(6 == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
						{{code[6]?code[6]:''}}
					</view>
					<view class="box1-2-11">
						<image class="box1-2-1img" src="https://x.bilinmeiju.com/static/jia.png" mode=""></image>
						<view class="box1-2-1text">
							新能源
						</view>
					</view>
				</view>
				<view class="box1-1">
					请选择车牌颜色
				</view>
				<view class="box1-3">
					<view :class="color=='blue'?'box1-3-11':'box1-3-1'" @click="cheliangcolor(0)">
						蓝牌
					</view>
					<view :class="color=='green'?'box1-3-22':'box1-3-2'" @click="cheliangcolor(1)">
						渐变绿
					</view>
				</view>

			</view>
		</view>

		<view class="box" style="margin-top: 20rpx;">
			<view class="box1">
				<view class="box-1">
					<view class="box-1text">
						身份类型
					</view>
					<view class="box-2">
						<picker @change="bindPickerChange" :value="index2" :range="carloc" range-key="carno">
							<view class="uni-input">{{chewei?chewei:'请选择您的车位'}}</view>
						</picker>
					</view>
					<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode="">
					</image>
				</view>

				<view class="xianmax">
					<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
				</view>

				<view class="box-1">
					<view class="box-1text">
						姓名
					</view>
					<view class="">
						<input type="tel" v-model="name" placeholder="请输入姓名">
					</view>
				</view>
				<view class="xianmax">
					<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
				</view>

				<view class="box-1">
					<view class="box-1text">
						手机号
					</view>
					<view class="">
						<input type="tel" v-model="phone.hidephone" placeholder="点击输入物业预留手机号">
					</view>
				</view>
				<view class="xianmax">
					<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
				</view>

				<view class="box-1">
					<view class="box-1text">
						验证码
					</view>
					<view class="box-2" style="width: 200rpx;">
						<input class="uni-input" type="text" placeholder="输入验证码" v-model="zcode">
					</view>
					<view class="yzmtext" @click="getcode">
						{{codetxt}}
					</view>

				</view>

			</view>

		</view>
		<view class="bottom" @click="tijiao">
			提交
		</view>
		<uni-popup ref="popup" is-mask-click mask-background-color="rgba(0,0,0,0)">
			<view class="" style="width: 100vw;height: 100vh;display: flex;align-items: flex-end;">
				<bugking7-carkeyboard ref="carKeyboard" :defaultValue="code" :customCarInput="true"
					:customCarInputCursor="customCarInputIndex" @carKeyboardClick="handleCarClick"
					@carKeyboardFinish="handleKeyboardFinish"></bugking7-carkeyboard>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bartop: 0,
				code: '',
				focus: true,
				isCode: true,
				chewei: '',
				codetxt: '获取验证码',
				index2: '',
				carloc: [],
				name: '',
				color: '',
				zcode: '',

				phone: {
					hidephone: '',
					phone: ''
				},

			}
		},
		onLoad() {
			this.bartop = this.$bartop;
			this.getmycarloc()
		},
		watch: {
			code() {
				if (this.code.length == 7) {
					this.$refs.popup.close()
				}
			}
		},
		methods: {
			codeNumInputFun(e) {
				let val = e.detail.value
				this.code = val
				if (val.length == 6) {
					this.isCode = false
				} else {
					this.isCode = true
				}

			},
			cheliangcolor(e) {
				if (e == 0) {
					this.color = 'blue'
				} else {
					this.color = 'green'
				}
			},
			tijiao() {
				this.$post('center/addcar', {
					carnoid: this.carloc[this.index2].id,
					carnumber: this.code,
					color: this.color,
					name: this.name,
					phone: this.phone.phone,
					code: this.zcode
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(res => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			getcode() {
				var codetxt = this.codetxt;
				if (codetxt != '获取验证码') return false;
				var yzphone = this.phone.phone;
				if (!yzphone) {
					uni.showToast({
						title: '请绑定房产',
						icon: 'error'
					})
					return false;
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$post('api/sendcode', {
					phone: yzphone
				}).then(res => {
					uni.hideLoading()
					if (res.code === 0) {
						var date = new Date();
						uni.setStorageSync('sec', date.getTime() * 1 + 120 * 1000);
						this.codetxt = '重获取(120秒)';
						this.daojishi()
					}
				})
			},
			daojishi() {
				var that = this;
				var date = new Date();
				var nowtime = date.getTime() * 1;
				var endtime = uni.getStorageSync('sec');
				var cha = (endtime - nowtime) / 1000;
				cha = cha.toFixed(0)
				if (cha > 0) {
					that.codetxt = '重获取(' + cha + '秒)';
					setTimeout(function() {
						that.daojishi();
					}, 1000)
				} else {
					uni.setStorageSync('sec', 0);
					that.codetxt = '获取验证码';
				}
			},
			bindPickerChange(e) {
				this.index2 = e.detail.value
				this.chewei = this.carloc[this.index2].carno
				this.getowner(this.carloc[this.index2].id)
			},

			getmycarloc() {
				this.$post('center/getmycarloc', {}).then(res => {
					this.carloc = res.data.carlist
					this.getowner(this.carloc[0].id)
				})
			},
			getowner(id) {
				this.$post('center/getowner', {
					id: id
				}).then(res => {
					this.phone = res.data

				})
			},
			handleKeyboardFinish(e) { //车牌键盘完成点击事件 通用事件
				this.$refs.popup.close()
				console.log(e)
			},
			handleCarClick(e) { //input 使用 车牌输入键盘按键点击事件
				this.code = e.value
			},

			codeNumBlurFun(e) {
				let val = e.detail.value
				this.focus = false
				if (val.length == 6) {
					this.isCode = false
				} else {
					this.isCode = true
				}

			},
			codefocusFun(index) {
				this.focus = false
				this.$refs.popup.open('center')
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 90vw;
		margin: 0rpx auto;
		/* display: flex; */
		background-color: white;
	}

	.phone {
		background-color: #FFF;
		width: 100vw;
		height: 100vh;

		&_code {
			padding: 30rpx;

			&_label {
				font-size: 30rpx;
				color: #999;
			}

			&_count {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				&_new {
					color: #e64340;
					font-size: 38rpx;
					font-weight: bold;
				}

				&_down {
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					color: #999;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}

			&_single {
				margin-top: 30rpx;

				&_cinput {
					position: fixed;
					left: -100rpx;
					width: 50rpx;
					height: 50rpx;
				}

				&_codeinput {
					margin: auto;
					width: 650rpx;
					height: 100rpx;
					display: flex;
				}

				&_codeinput>view {
					margin-top: 5rpx;
					margin-left: 15rpx;
					width: 86rpx;
					height: 86rpx;
					line-height: 86rpx;
					font-size: 60rpx;
					font-weight: bold;
					color: #313131;
					text-align: center;
					border-radius: 10rpx;
				}

				&_codeinput>view:nth-child(1) {
					margin-left: 0rpx;
				}
			}
		}
	}


	.box1 {
		width: 86vw;
		margin: 0 auto;
	}

	.box1-1 {
		padding: 20rpx 0;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #0A0204;
	}

	.box1-2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box1-2-1 {
		width: 67rpx;
		height: 85rpx;
		background-color: rgb(240, 245, 255);
		text-align: center;
		line-height: 85rpx;
		font-size: 30rpx;
		font-weight: 500;
	}

	.box1-2-2 {
		width: 9rpx;
		height: 9rpx;
		margin: 0 20rpx;
		background-color: rgb(240, 245, 255);
	}

	.box1-3 {
		display: flex;
		padding-bottom: 40rpx;
	}

	.box1-3-1 {
		width: 120rpx;
		height: 50rpx;
		border-radius: 5rpx;
		background-color: rgb(0, 110, 255);
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
	}

	.box1-3-11 {
		width: 120rpx;
		height: 50rpx;
		opacity: 0.7;
		border-radius: 5rpx;
		background-color: rgb(0, 110, 255);
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
	}

	.box1-3-2 {
		width: 120rpx;
		height: 50rpx;
		border-radius: 5rpx;
		background-color: rgb(0, 192, 140);
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
	}

	.box1-3-22 {
		width: 120rpx;
		height: 50rpx;
		opacity: 0.7;
		border-radius: 5rpx;
		background-color: rgb(0, 192, 140);
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
	}

	.box-1 {
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.box-1text {
		width: 180rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	.box-1-img {
		width: 9rpx;
		height: 17rpx;
	}

	.box-2 {
		width: 420rpx;
		font-size: 29rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.xianmax {
		display: flex;
		justify-content: center;
	}

	.xian {
		width: 641rpx;
		height: 2rpx;
		margin: 0 auto;
	}

	.yzmtext {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FE7B00;
	}

	.bottom {
		position: fixed;
		bottom: 50rpx;
		left: 25rpx;
		width: 700rpx;
		height: 100rpx;
		margin: 0 auto;
		background-image: url('https://x.bilinmeiju.com/static/anbj.png');
		background-size: 700rpx auto;
		line-height: 100rpx;
		color: white;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}

	.box1-2-1img {
		width: 24rpx;
		height: 23rpx;
	}

	.box1-2-1text {
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.box1-2-11 {
		width: 67rpx;
		height: 85rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('https://x.bilinmeiju.com/static/kuang.png');
		background-size: 67rpx auto;
	}
</style>
